<template>
  <div class="test-page">
    <div id="fps-svg" class="target-svg-style target-style">
      <charts-main :options="fpsOptions"/>
    </div>
    <div class="target-svg-style target-style">
      <charts-main :options="cpuOptions"/>
    </div>
    <div class="target-svg-style target-style">
      <charts-main :options="memoryOptions"/>
    </div>
  </div>
</template>

<script>
  import ChartsMain from "./echarts/ChartsMain";
  import {eventBus} from '@/utils/Bus'
  import {formatReportData, getDragTooltipsData, getTooltipsData} from "./util";
  import makeChartsOptions from './echarts/options/makeFpsOptions'
  import makeCpuOptions from './echarts/options/makeCpuOptions'
  import makeMemoryOptions from './echarts/options/makeMemoryOptions'

  import {INDEX_TIMESTAMP} from "./constant";
  import {caseDetail} from './data/caseDetail.js'
  import {caseReport} from './data/caseDetail.js'

  let data = caseDetail.data
  export default {
    name: "CaseDetail",
    components: {ChartsMain},
    data() {
      return {
        fpsOptions: {},
        cpuOptions: {},
        memoryOptions: {},
        chartOptions: []
      }
    },
    mounted() {
      let state = {caseDetail: caseDetail.data, caseReport: caseReport.data}
      state.fullDataList = formatReportData(state)
      let timestamp = state.fullDataList[INDEX_TIMESTAMP]
      this.$store.commit('setStoreValue', {
        maxTimestamp: timestamp[timestamp.length - 1],
        timestamps: timestamp,
      })
      this.fpsOptions = makeChartsOptions(state);
      this.cpuOptions = makeCpuOptions(state)
      this.memoryOptions = makeMemoryOptions(state)
      this.chartOptions.push(
        this.fpsOptions,
        this.cpuOptions,
        this.memoryOptions
      )
      eventBus.on('makeChartOptionsAll', this.makeChartOptionsAll)
      eventBus.on('makeDragOptionsAll', this.makeDragOptionsAll)
      window.onresize = this.resize
      this.resize()
    },
    methods: {
      resize() {
        let width = document.documentElement.offsetWidth
        if (width < 1200) width = 1200
        this.updateDataAreaWidth(width < 1600 ? width : 1600)
      },
      makeChartOptionsAll(time) {
        for (let item of this.chartOptions) {
          data = getTooltipsData(item, time)
          item.tooltips = data
        }
      },
      makeDragOptionsAll(startTime, endTime) {
        for (let item of this.chartOptions) {
          data = getDragTooltipsData(item, startTime, endTime)
          item.dragTooltips = data
        }
      },
      updateDataAreaWidth(width) {
        for (let item of this.chartOptions) {
          item.width = width
        }
      }
    },
    beforeDestroy() {
      window.onresize = null
    }
  }
</script>

<style lang="scss" scoped>
  .target-style {
    width: 1460px;
    margin: 40px auto;
    box-shadow: 0 2px 10px rgba(179, 186, 220, .4);
    padding: 20px 0;

    &.target-svg-style {
      width: 1600px;
    }

    svg {
      vertical-align: bottom
    }
  }

  .test-page {
    &::after {
      content: "";
      display: table;
    }
  }
</style>